<script>
export default {
  name: 'XTable'
}
</script>

<script setup>
import { defineProps, defineModel, watchEffect, ref } from 'vue'
import _ from 'lodash'
import { provide } from 'vue'

const multipleTableRef = ref()
const selection = defineModel('selection')
const { store } = defineProps(['store'])

provide('store', store)

// 自动加载
store.vm.status === 0 &&
  store.autoLoad &&
  store.load({ option: { page: 1, size: 10 }, params: { username: '' } })

// 逻辑简单 --》 性能略差
// 当数据源产生变化后，进行数据对比
watchEffect(() => {
  // 先进性全部取消的逻辑
  store.vm.data.forEach(item => {
    multipleTableRef.value?.toggleRowSelection(item, false)
  })
  // row.users : 需要选中的值【主要是根据id进行对比】
  // store.vm.data : 数据源相关的值
  // 以数据源为主，根据row.ursers 中的id，获取内容
  const rows = _.intersectionBy(store.vm.data, selection.value, item => item.id)
  rows.forEach(item => {
    multipleTableRef.value?.toggleRowSelection(item, true)
  })
})

function selectHandler(rows, row) {
  // 便于理解，但性能不一定优秀的方案
  // rows: 当前页选中的行
  // selection： 当前table，选中的行
  // store.vm.data: 当前页所有的数据源

  // selection =  selection 中，去除当前页的行 + rows
  selection.value = _.differenceBy(selection.value, store.vm.data, item => item.id).concat(rows)
}
</script>

<template>
  <el-table
    v-bind="$attrs"
    :class="store.vm.status == 3 ? 'table-error' : ''"
    v-loading="store.vm.status == 1"
    :data="store.vm.data"
    @select="selectHandler"
    @select-all="selectHandler"
    ref="multipleTableRef"
  >
    <slot></slot>
    <template #empty>
      <div v-if="store.vm.status == 3">
        接口请求异常，请点击 <el-button @click="store.retry()">重试</el-button>
      </div>
      <div v-if="store.vm.status == 2"> 暂无数据，请练习管理员 </div>
    </template>
  </el-table>
  <el-pagination
    class="marginTop20px"
    v-model:current-page="store.vm.page"
    @current-change="store.loadByPage($event)"
    :total="store.vm.count"
    layout="prev, pager, next, jumper, ->, sizes, total,"
  />
</template>

<style scoped lang="scss">
.marginTop20px {
  margin-top: 20px;
}
</style>
